<template>
  <TreeTableLayout>
    <template #tree>
      <Tree @query="doQuery2" @gateway="getGateway" :gatewayType="0"></Tree>
    </template>
    <template #table>
      <RightTableLayout :slotName="['search', 'operation', 'table', 'pagination']">
        <template #search>
          <Query :columns="columns" @query="doQuery"></Query>
        </template>
        <template #operation>
          <div :class="{ btnbox: pid }" style="height: 5.88rem;">
            <el-button type="danger" @click="setLightNum" style="margin-right: 1rem;">
              {{ i18n.language === "zh-cn" ? "开关灯值" : "Switchlightvalue" }}
            </el-button>
            <el-button type="primary" @click="newAdd()">
              {{ i18n.language === "zh-cn" ? "新增灯" : "Addlights" }}
            </el-button>
            <el-button type="primary" @click="allLightOn">
              {{ i18n.language === "zh-cn" ? "全部开灯" : "Alllightson" }}
            </el-button>
            <el-button type="primary" @click="allLightOff">
              {{ i18n.language === "zh-cn" ? "全部关灯" : "Turnoffalllights" }}
            </el-button>
            <el-button type="primary" @click="allLightAdjust">
              {{ i18n.language === "zh-cn" ? "全部调光" : "DimmingAll" }}
            </el-button>
            <el-button type="primary" @click="allAdjustColor">
              {{ i18n.language === "zh-cn" ? "全部调色" : "ColorAll" }}
            </el-button>
            <el-button type="primary" @click="allDarkenDelay">
              {{ i18n.language === "zh-cn" ? "全关灯延时" : "Fullturnoffdelay" }}
            </el-button>
            <el-button type="primary" @click="allTrigger">
              {{ i18n.language === "zh-cn" ? "全感应头开关" : "FullInductionHeadSwitch" }}
            </el-button>
            <el-button type="primary" @click="allSensitivity">
              {{ i18n.language === "zh-cn" ? "全感应头灵敏度" : "FullSensingHeadSensitivity" }}
            </el-button>
            <el-button type="primary" @click="gradually">
              {{ i18n.language === "zh-cn" ? "全渐亮灭" : "AllGraduallyBrighteningAndFading" }}
            </el-button>
            <el-button type="primary" @click="allPropertie">
              {{ i18n.language === "zh-cn" ? "全设备属性" : "FullDeviceProperties" }}
            </el-button>
            <el-button type="primary" @click="allLightTest">
              {{ i18n.language === "zh-cn" ? "全灯测试" : "FullLightTest" }}
            </el-button>
            <br />
            <br />
            <el-button type="primary" @click="unbind">
              {{ i18n.language === "zh-cn" ? "批量删除" : "BatchDelete" }}
            </el-button>
            <el-button type="primary" @click="updateCustomName2">
              {{ i18n.language === "zh-cn" ? "设置别名" : "SetAlias" }}
            </el-button>
            <el-button type="primary" @click="setArea">
              {{ i18n.language === "zh-cn" ? "设置区号" : "SetAreaCode" }}
            </el-button>
            <el-button type="primary" @click="groupNum">
              {{ i18n.language === "zh-cn" ? "设置组号" : "SetGroupNumber" }}
            </el-button>
            <el-button type="primary" @click="ungroup()">
              {{ i18n.language === "zh-cn" ? "解除分组" : "Ungroup" }}
            </el-button>
            <el-button type="primary" @click="lightOn">
              {{ i18n.fy.开灯 }}
            </el-button>
            <el-button type="primary" @click="lightOff">
              {{ i18n.language === "zh-cn" ? "关灯" : "TurnOffTheLights" }}
            </el-button>
            <el-button type="primary" @click="adjustLight">
              {{ i18n.language === "zh-cn" ? "调光" : "Dimming" }}
            </el-button>
            <el-button type="primary" @click="adjustColor">
              {{ i18n.language === "zh-cn" ? "调色" : "toning" }}
            </el-button>
            <el-button type="primary" @click="setsensitivity">
              {{ i18n.language === "zh-cn" ? "设置灵敏度" : "SetSensitivity" }}
            </el-button>
            <el-button type="primary" @click="flash()">
              {{ i18n.language === "zh-cn" ? "闪一闪" : "Twinkle" }}
            </el-button>
            <el-button type="primary" @click="stopFlash()">
              {{ i18n.language === "zh-cn" ? "停止闪" : "Stop flashing" }}
            </el-button>
            <el-button type="primary" @click="atOperation">
              {{ i18n.fy.AT操作 }}
            </el-button>
            <el-button type="primary" @click="OTAUpgrade">
              {{ i18n.language === "zh-cn" ? "OTA升级" : "OTAupgrade" }}
            </el-button>
          </div>
        </template>
        <template #table>
          <el-table :empty-text="i18n.fy.nodata" :data="data.tableData" ref="multipleTableRef" border
            :style="{ width: getWidth(), height: getHeight() }" v-loading="data.loading"
            :element-loading-text="i18n.fy.loading" @selection-change="handleSelectionChange"
            @sort-change="sortChangeTable">
            <el-table-column type="selection" width="55" fixed />
            <el-table-column prop="macaddress" :label="i18n.fy.SerialNumber" width="70" align="center" fixed>
              <template #default="scope">
                {{ scope.$index * 1 + 1 + (data.queryForm.page - 1) * data.queryForm.limit }}
              </template>
            </el-table-column>
            <el-table-column prop="macaddress" :label="i18n.fy.MACAddress" width="150" fixed />
            <el-table-column prop="customName" :label="i18n.fy.DeviceAliases" width="150" :sortable="true" fixed
              :show-overflow-tooltip="true">
              <template #default="scope">
                <span v-if="scope.row.customName === '01'">CCO</span>
                <span v-else-if="scope.row.customName === '02'">STA</span>
                <span v-else-if="scope.row.customName === '03'">METER</span>
                <span v-else>
                  {{ scope.row.customName || "" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="deviceType" :label="i18n.fy.EquipmentName" :sortable="true" width="150" />
            <el-table-column prop="operatingStatus" :label="i18n.fy.DeviceStatus" :sortable="true" width="150">
              <template #default="scope">
                <span v-if="scope.row.operatingStatus === '01'" style="color: lawngreen">
                  {{ i18n.language === "zh-cn" ? "在线" : "online" }}
                </span>
                <span v-else-if="scope.row.operatingStatus === '00'" style="color: #ddd">
                  {{ i18n.language === "zh-cn" ? "离线" : "offline" }}
                </span>
                <span v-else>{{ scope.row.operatingStatus }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="areaCode" :label="i18n.fy.EquipmentArea" width="150" :sortable="true" />
            <el-table-column prop="groupName" :label="i18n.fy.EquipmentGroupNumber" width="220">
              <template #header="scope">
                <div style="display: flex" class="selectName">
                  {{ i18n.fy.EquipmentGroupNumber }}
                  <select v-model="customName" placeholder="" @change="setCustomName()">
                    <option v-for="item in options" :value="item.group_name">{{ item.name || item.group_name }}</option>
                  </select>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="luminance" :label="i18n.fy.CurrentBrightness" width="150"> </el-table-column>
            <el-table-column prop="triggerOpenLightNum" :label="i18n.fy.Someonebrightness" width="150">
            </el-table-column>
            <el-table-column prop="triggerFloodlightNum" :label="i18n.fy.Unmannedbrightness" width="150">
            </el-table-column>
            <el-table-column prop="darkenDelay" :label="i18n.fy.Delaytime" width="150"> </el-table-column>
            <el-table-column prop="colorTemperature" :label="i18n.fy.Currentchromaticity" width="150">
            </el-table-column>
            <el-table-column prop="hasTrigger" :label="i18n.fy.Sensingheadstatus" width="150"> </el-table-column>
            <el-table-column prop="sensorSensitivity" :label="i18n.fy.sensorSensitivity" width="150">
              <template #default="scope">
                <span v-if="scope.row.sensorSensitivity == 'FF'"></span>
                <span v-else>
                  {{ scope.row.sensorSensitivity }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="luminanceChange" :label="i18n.fy.luminanceChange" width="150">
              <template #default="scope">
                {{ scope.row.luminanceChange }}
              </template>
            </el-table-column>
            <el-table-column prop="ratedPower" :label="i18n.fy.ratedPower" width="150"> </el-table-column>
            <el-table-column prop="kwh" :label="i18n.fy.electricity + '(KWH)'" width="150">
              <template #default="scope">
                {{ scope.row.kwh / 1000 }}
              </template>
            </el-table-column>
            <el-table-column prop="amp" :label="i18n.fy.power + '(KW)'" width="150">
              <template #default="scope">
                {{ scope.row.amp / 100 }}
              </template>
            </el-table-column>
            <el-table-column prop="watt" :label="i18n.fy.current + '(A)'" width="150">
              <template #default="scope">
                {{ scope.row.watt / 100 }}
              </template>
            </el-table-column>
            <el-table-column prop="softwareVersion" :label="i18n.fy.Version" width="150"> </el-table-column>
            <el-table-column prop="updateTime" :label="i18n.fy.updateTime" width="170"> </el-table-column>
          </el-table>
        </template>
        <template #pagination>
          <el-pagination @size-change="onChanSize" @current-change="onChanPage"
            v-model:current-page="data.queryForm.page" v-model:page-size="data.queryForm.limit" :total="data.total" />
        </template>
      </RightTableLayout>
    </template>
  </TreeTableLayout>
  <div id="lightNameDiv" style="display: none; padding: 20px; text-align: center">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <div class="layui-inline">
          <div class="lightNameDiv">
            <label class="layui-form-label">设备名称:</label>
            <div class="layui-input-inline">
              <input type="text" name="customName" id="customName" autocomplete="off" class="layui-input" />
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div id="slideDiv" style="display: none; padding: 20px; text-align: center">
    <div id="slideTest1"></div>
  </div>
  <div id="slideDiv2" style="display: none; padding: 20px; text-align: center">
    <div class="layui-form-item">
      <label class="layui-form-label">
        {{ i18n.language === "zh-cn" ? "关灯值" : "Successfully set" }}
        :</label>
      <div class="layui-input-block">
        <div id="slide1"></div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">
        {{ i18n.language === "zh-cn" ? "开灯值" : "Successfully set" }}
        :</label>
      <div class="layui-input-block">
        <div id="slide2"></div>
      </div>
    </div>
  </div>
  <div id="lightNameDiv2" style="display: none; padding: 20px; text-align: center">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <div class="layui-inline">
          <div>
            <label class="layui-form-label">
              {{ i18n.language === "zh-cn" ? "设备组号" : "Equipment group number" }}
              :</label>
            <div class="layui-input-inline">
              <input type="text" name="groupNum" id="groupNum" autocomplete="off" class="layui-input" />
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div id="lightNameDiv2_3" style="display: none; padding: 20px; text-align: center">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <div class="layui-inline">
          <div>
            <label class="layui-form-label">
              {{ i18n.language === "zh-cn" ? "设备组号" : "Equipment group number" }}
              :</label>
            <div class="layui-input-inline">
              <input type="text" name="groupNum" id="groupNum_3" autocomplete="off" class="layui-input" />
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div id="lightTestDiv" style="display: none; padding: 20px; text-align: center">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">
          {{ i18n.language === "zh-cn" ? "开关值" : "switch value" }}
          :</label>
        <div class="layui-input-block">
          <input type="radio" name="lTest" value="0" title="开" checked="" />
          <input type="radio" name="lTest" value="1" title="关" />
        </div>
      </div>
    </form>
  </div>
  <div style="display: none; padding: 20px; text-align: center" class="bgimg" id="saveOrUpdateDiv">
    <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
      <div class="layui-form-item">
        <div class="layui-form-item">
          <label class="layui-form-label">
            {{ i18n.language === "zh-cn" ? "mac地址" : "macAddress" }}
            :</label>
          <div class="layui-input-block">
            <input type="hidden" name="id" />
            <input type="hidden" name="deviceFid" />
            <input type="text" name="macaddress" readonly lay-verify="required" autocomplete="off"
              class="layui-input" />
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">
            {{ i18n.language === "zh-cn" ? "触发器开灯亮度" : "TriggerOnBrightness" }}
            :</label>
          <div class="layui-input-inline">
            <input type="text" name="triggerOpenLightNum" lay-verify="required" autocomplete="off"
              class="layui-input" />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">
            {{ i18n.language === "zh-cn" ? "触发器关灯亮度" : "TriggerOffLightBrightness" }}
            :</label>
          <div class="layui-input-inline">
            <input type="text" name="triggerFloodlightNum" lay-verify="required" autocomplete="off"
              class="layui-input" />
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">开灯渐变:</label>
          <div class="layui-input-inline">
            <input type="text" name="luminanceChange" lay-verify="required" autocomplete="off" class="layui-input" />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">开灯延迟:</label>
          <div class="layui-input-inline">
            <input type="text" name="luminanceDelay" lay-verify="required" autocomplete="off" class="layui-input" />
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">关灯渐变:</label>
          <div class="layui-input-inline">
            <input type="text" name="darkenChange" lay-verify="required" autocomplete="off" class="layui-input" />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">关灯延迟:</label>
          <div class="layui-input-inline">
            <input type="text" name="darkenDelay" lay-verify="required" autocomplete="off" class="layui-input" />
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">组编号:</label>
          <div class="layui-input-inline">
            <input type="text" name="groupNum" id="select-group" readonly autocomplete="off" class="layui-input" />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">带触发器:</label>
          <div class="layui-input-inline">
            <input type="text" readonly id="hasTrigger" lay-verify="required" autocomplete="off" class="layui-input" />
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">控灯数:</label>
          <div class="layui-input-inline">
            <input type="text" name="controlLightSize" id="controlLightSize" lay-verify="required" autocomplete="off"
              class="layui-input" />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">灯控mac地址:</label>
          <div class="layui-input-inline">
            <input type="text" name="triggerMacaddress" id="triggerMacaddress" lay-verify="required" autocomplete="off"
              class="layui-input" />
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center">
        <div class="layui-input-block">
          <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release"
            lay-filter="doSubmit" lay-submit="">
            {{ i18n.language === "zh-cn" ? `提交` : "submit" }}
          </button>
        </div>
      </div>
    </form>
  </div>
  <div id="slideDiv3" class="slideDiv linev" style="display: none; padding: 20px; text-align: center">
    <div class="layui-form-item" style="margin-top: 50px">
      <label class="layui-form-label tsdm-box-cls">
        {{ i18n.language === "zh-cn" ? `递变` : "change by degrees" }}
        :</label>
      <div class="layui-input-block">
        <div id="slide3"></div>
        <div class="slitips">00关闭缓光</div>
      </div>
    </div>
  </div>
  <div id="lightNameDiv4" style="display: none; padding: 20px; text-align: center">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <div class="layui-inline">
          <div>
            <label class="layui-form-label">设备区号:</label>
            <div class="layui-input-inline">
              <input type="text" name="areaCode" id="areaCode" autocomplete="off" class="layui-input" />
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div id="lightNameDiv4_3" style="display: none; padding: 20px; text-align: center">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <div class="layui-inline">
          <div>
            <label class="layui-form-label">设备区号:</label>
            <div class="layui-input-inline">
              <input type="text" name="areaCode" id="areaCode_3" autocomplete="off" class="layui-input" />
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  <el-dialog v-model="otaVisible" title="OTA升级" width="30%" draggable>
    <div class="uploadBox" v-loading="uploadLoadding" element-loading-text="文件正在上传中...">
      <el-upload ref="upload" class="upload-demo" :action="$httpUrl + '/operation/ota'" :limit="1"
        :on-exceed="handleExceed" :auto-upload="false" :data="uploadData" :on-success="uploadScucess">
        <template #trigger>
          <el-button type="primary">选择文件</el-button>
        </template>
        <template #tip>
          <div class="el-upload__tip text-red">
            {{ i18n.language === "zh-cn" ? `限制1个文件，新文件将覆盖旧文件` : "Limit 1 file, new file will overwrite old file" }}
          </div>
        </template>
      </el-upload>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-space :size="10"> <el-button @click="enterUpload()">取消</el-button></el-space>
        <el-space :size="30">
          <el-button class="ml-3" type="success" @click="submitUpload">
            {{ i18n.language === "zh-cn" ? `开始上传` : "StartSploading" }}
          </el-button></el-space>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible" :title="i18n.fy.AT操作" width="30%" draggable>
    <div style="position: relative; height: 600px" v-loading="senloading">
      <div class="atbox">
        <el-row v-for="(item, i) in showChatList">
          <div style="position: absolute; z-index: 9; margin-top: -30px; color: #fff; font-size: 12px">
            <span>系统回复：{{ item.time }}</span>
          </div>
          <el-col :span="10">
            <el-input style="width: 100%; float: left; margin-top: -10px" v-model="item.hcont" disabled="true" :rows="2"
              type="textarea" placeholder="回复的内容" />
          </el-col>
          <el-col :span="14">
            <el-input style="width: 95%; float: right" v-model="item.fcont" disabled="true" :rows="2" type="textarea"
              placeholder="发送的内容" />
          </el-col>
        </el-row>
      </div>
      <el-row class="rowbot">
        <el-col :span="24">
          <el-input style="width: 100%; float: right" :rows="2" v-model="textareaV" type="textarea" placeholder="请输入指令"
            @keyup.enter="enterSen" />
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="enterSen">
          {{ i18n.fy.sending }}
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog :close-on-click-modal="false" v-model="dialogVisible2" draggable
    :title="i18n.language === 'zh-cn' ? '扫描添灯' : 'Scan and add light'" width="50%" class="newAdd"
    style="background: #000" @close="closeDialog" top="30px">
    <div style="padding-bottom: 30px">
      <div>
        <div class="top tops" style="margin-top: -20px">
          <el-row>
            <el-col :span="24">
              <span :span="4" style="display: none">
                <el-select style="width: 120px; margin-left: -6px" v-model="gateway" class="m-2" placeholder="">
                  <el-option :label="i18n.language === 'zh-cn' ? '全部网关' : 'Allgateways'" :value="''" />
                  <el-option v-for="item in gatewayList" :key="item.id" :label="item.title" :value="item.id" />
                </el-select>
              </span>
              <span :span="3" style="display: none">
                <el-input style="width: 100px" v-model="district"
                  :placeholder="i18n.language === 'zh-cn' ? '区' : 'distinguish'" />
              </span>
              <span :span="3" style="display: none">
                <el-input style="width: 100px" v-model="group" placeholder="组" />
              </span>
              <span :span="3" style="display: none">
                <el-input style="width: 100px" v-model="num" placeholder="号" />
              </span>
              <span :span="4" style="display: none">
                <el-input style="width: 120px" v-model="identity" placeholder="网络密码" />
              </span>
              <span :span="4">
                <el-button type="primary" @mouseover="mouLight" @mouseout="outLinght"
                  :class="{ searchFlag: searchFlag }" @click="searchLight()">
                  {{ searchHtml }}
                  <el-icon v-show="iconFlag">
                    <Loading class="loa" />
                  </el-icon>
                </el-button>
                <span v-show="contNumber" class="numberLog">
                  <span>共{{ contNumber }}盏灯，已经更新 {{ numberLog }}盏灯</span>
                </span>
              </span>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-table :empty-text="i18n.fy.nodata" :data="data.tableData2" style="width: 100%" class="newAddTab"
        @selection-change="handleSelectionChange2">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="macaddress" label="MAC地址" width="180" />
        <el-table-column prop="areaCode" label="区" :sortable="true" />
        <el-table-column prop="groupName" label="组" :sortable="true" />
        <el-table-column prop="deviceIndex" label="号" :sortable="true" />
        <el-table-column prop="deviceType" label="类型" />
        <el-table-column prop="updateTime" label="更新时间" width="180" :sortable="true" />
        <el-table-column prop="option" label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" size="small" @click="start(scope.row)">闪一闪</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="enterAdd()">确认新增</el-button>
        <el-button @click="close"> 关闭 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog class="dialogPermiss" style="background: #000" v-model="dialogTableVisible" title="设置区组号" width="100%"
    draggable>
    <div class="PermissionList">
      <div class="setArea3">
        <el-button type="primary" @click="setArea3">
          {{ i18n.language === "zh-cn" ? "设置区号" : "SetAreaCode" }}
        </el-button>
        <el-button type="primary" @click="groupNum3">
          {{ i18n.language === "zh-cn" ? "设置组号" : "SetGroupNumber" }}
        </el-button>
        <el-button type="primary" @click="ungroup3">
          {{ i18n.language === "zh-cn" ? "解除分组" : "Ungroup" }}
        </el-button>
      </div>
      <el-table :empty-text="i18n.fy.nodata" ref="multipleTableRef_3" :scrollbar-always-on="true" style="width: 100%"
        class="wiretab" :data="gridData" border :element-loading-text="i18n.fy.loading"
        @selection-change="handleSelectionChange_3" @select="selectClick_3" @row-click="handleRowClick_3"
        @sort-change="sort_change2">
        <el-table-column type="selection" width="55" fixed />
        <el-table-column prop="macaddress" :label="i18n.fy.SerialNumber" width="70" align="center" fixed>
          <template #default="scope">
            {{ scope.$index * 1 + 1 + (data.queryForm.page - 1) * data.queryForm.limit }}
          </template>
        </el-table-column>
        <el-table-column prop="macaddress" :label="i18n.fy.MACAddress" width="150" fixed />
        <el-table-column prop="customName" :label="i18n.fy.DeviceAliases" width="150" fixed :sortable="true"
          :show-overflow-tooltip="true">
          <template #default="scope">
            <span v-if="scope.row.customName === '01'">CCO</span>
            <span v-else-if="scope.row.customName === '02'">STA</span>
            <span v-else-if="scope.row.customName === '03'">METER</span>
            <span v-else>
              {{ scope.row.customName || "" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="deviceType" :label="i18n.fy.EquipmentName" width="150" :sortable="true" />
        <el-table-column prop="operatingStatus" :label="i18n.fy.DeviceStatus" :sortable="true" width="150">
          <template #default="scope">
            <span v-if="scope.row.operatingStatus === '01'" style="color: lawngreen">
              {{ i18n.language === "zh-cn" ? "在线" : "online" }}
            </span>
            <span v-else-if="scope.row.operatingStatus === '00'" style="color: #ddd">
              {{ i18n.language === "zh-cn" ? "离线" : "offline" }}
            </span>
            <span v-else>{{ scope.row.operatingStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="areaCode" :label="i18n.fy.EquipmentArea" width="150" :sortable="true" />
        <el-table-column prop="groupName" :label="i18n.fy.EquipmentGroupNumber" width="220">
          <template #header="scope">
            <div style="display: flex" class="selectName">
              {{ i18n.fy.EquipmentGroupNumber }}
              <select v-model="customName" placeholder="" @change="setCustomName()">
                <option v-for="item in options" :value="item.group_name">{{ item.name || item.group_name }}</option>
              </select>
            </div>
          </template></el-table-column>
        <el-table-column prop="luminance" :label="i18n.fy.CurrentBrightness" width="150"> </el-table-column>
        <el-table-column prop="triggerOpenLightNum" :label="i18n.fy.Someonebrightness" width="150">
          <template #default="scope">
            {{ hex2int(scope.row.triggerOpenLightNum) }}
          </template>
        </el-table-column>
        <el-table-column prop="triggerFloodlightNum" :label="i18n.fy.Unmannedbrightness" width="150">
          <template #default="scope">
            {{ hex2int(scope.row.triggerFloodlightNum) }}
          </template>
        </el-table-column>
        <el-table-column prop="darkenDelay" :label="i18n.fy.Delaytime" width="150"> </el-table-column>
        <el-table-column prop="colorTemperature" :label="i18n.fy.Currentchromaticity" width="150"> </el-table-column>
        <el-table-column prop="hasTrigger" :label="i18n.fy.Sensingheadstatus" width="150"> </el-table-column>
        <el-table-column prop="sensorSensitivity" :label="i18n.fy.sensorSensitivity" width="150">
          <template #default="scope">
            <span v-if="scope.row.sensorSensitivity == 'FF'"></span>
            <span v-else>
              {{ scope.row.sensorSensitivity }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="luminanceChange" :label="i18n.fy.luminanceChange" width="150">
          <template #default="scope">
            {{ scope.row.luminanceChange }}
          </template>
        </el-table-column>
        <el-table-column prop="ratedPower" :label="i18n.fy.ratedPower" width="150"> </el-table-column>
        <el-table-column prop="kwh" :label="i18n.fy.electricity + '(KWH)'" width="150">
          <template #default="scope">
            {{ scope.row.kwh / 1000 }}
          </template>
        </el-table-column>
        <el-table-column prop="amp" :label="i18n.fy.power + '(KW)'" width="150">
          <template #default="scope">
            {{ scope.row.amp / 100 }}
          </template>
        </el-table-column>
        <el-table-column prop="watt" :label="i18n.fy.current + '(A)'" width="150">
          <template #default="scope">
            {{ scope.row.watt / 100 }}
          </template>
        </el-table-column>
        <el-table-column prop="softwareVersion" :label="i18n.fy.Version" width="150"> </el-table-column>
        <el-table-column prop="updateTime" :label="i18n.fy.updateTime" width="170"> </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
defineOptions({ name: "SetWiredDevice" });
import RightTableLayout from "@/views/workbench/components/RightTableLayout.vue";
import TreeTableLayout from "@/views/workbench/components/TreeTableLayout.vue";
import Query from "@/components/query.vue";
import Tree from "@/components/tree.vue";
import { clackAtApi } from "@/api/tosetdevicemanagerApi";
import { upMultiOperation } from "@/api/wiredmanageApi";
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();

const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
let $httpUrl = globalProperties.$httpUrl;
let columns = reactive({ macaddress: { label: i18n.fy.MAC地址, queryValue: "" } });
let chatList = ref([]);
let showChatList = ref([]);

let data = reactive({
  queryForm: { page: 1, limit: 100 },
  tableData: [],
  total: 0,
  dialog: false,
  form: {},
  rules: {
    name: [{ required: true, message: "请输入姓名", trigger: "change" }],
    role: [{ required: true, message: "请选择岗位", trigger: "change" }],
  },
});
let uploadData = ref({});
const handleExceed = (files) => {
  upload.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  upload.value.handleStart(file);
};

const submitUpload = () => {
  uploadLoadding.value = true;
  upload.value.submit();
};
const enterUpload = () => {
  otaVisible.value = false;
  upload.value.clearFiles();
};
let uploadLoadding = ref(false);
const uploadScucess = () => {
  ElMessage({
    message: "文件上传成功!",
    type: "success",
  });
  uploadLoadding.value = false;
};

const reQueryForm = () => {
  // 重置查询表单
  data.queryForm = {
    page: 1,
    limit: 100,
  };
};

const currentChange = (page) => {
  pageData.queryForm.page = page;
  getList();
};

const sizeChange = (size) => {
  data.queryForm.page = size;
  getList();
};

const onChanSize = (e) => {
  //修改分页数
  data.queryForm.page = 1;
  data.queryForm.limit = e;
  getList();
};

const onChanPage = (e) => {
  //修改分页
  data.queryForm.page = e;
  getList();
};

let formRef = ref(null);

let searchFlag = ref(false);
let searchHtml = ref("网关搜灯");
let iconFlag = ref(false);

const getList = (params, num) => {
  // 获取表格数据
  data.loading = true;
  $axios
    .get("/operationDevice/queryOperationDeviceAllList", {
      ...data.queryForm,
      ...params,
      deviceFid: pid.value,
      limit: 10000,
      page: 1,
    })
    .then((res) => {
      if (res.data.data == null) {
        data.loading = false;
        return;
      }
      data.loading = false;
      data.tableData = res.data.data.records.slice((data.queryForm.page - 1) * data.queryForm.limit, data.queryForm.page * data.queryForm.limit);
      if (num == 1) {
        window.setTimeout(function () {
          data.tableData.forEach((row) => {
            multipleTableRef.value.toggleRowSelection(row);
          });
        }, 200);
      }
      data.total = res.data.data.total;
      total = data.total;
    });
};
let pid = ref("");
const doQuery = (params) => {
  if (params.deviceFid) {
    pid.value = params.deviceFid;
  }
  uploadData.value = { deviceFid: pid.value };
  let num = 0;
  if (params.hasOwnProperty("macaddress")) {
    num = 1;
  } else {
    num = 0;
  }
  getList({ ...params, deviceFid: pid.value }, 0);
  getDeviceAliasAllList();
  $.get($httpUrl + "/userLightNum/queryUserLightNum", { deviceFid: pid.value }, function (res) {
    if (res.data != null) {
      lightOnNum = res.data.lightOnNum;
      lightOffNum = res.data.lightOffNum;
    } else {
      lightOnNum = 40;
      lightOffNum = 0;
    }
  });
};

const doQuery2 = (params) => {
  customName.value = "全部";
  if (params.deviceFid) {
    pid.value = params.deviceFid;
  }
  uploadData.value = { deviceFid: pid.value };
  let num = 0;
  if (params.hasOwnProperty("macaddress")) {
    num = 1;
  } else {
    num = 0;
  }
  getList({ ...params, deviceFid: pid.value }, 0);
  getDeviceAliasAllList();
  $.get($httpUrl + "/userLightNum/queryUserLightNum", { deviceFid: pid.value }, function (res) {
    if (res.data != null) {
      lightOnNum = res.data.lightOnNum;
      lightOffNum = res.data.lightOffNum;
    } else {
      lightOnNum = 40;
      lightOffNum = 0;
    }
  });
};

let gatewayList = ref([]);
const getGateway = (params) => {
  gatewayList.value = params;
};
const setLightNum = () => {
  form.render();
  let lightNum1 = 0;
  let lightNum2 = 0;
  let ins1 = slider1.render({
    elem: "#slide1", //绑定元素
    input: true, //输入框
    min: 0,
    max: 100,
    value: lightOffNum,
    change: function (value) {
      lightNum1 = value;
    },
  });
  let ins2 = slider2.render({
    elem: "#slide2", //绑定元素
    input: true, //输入框
    min: 10,
    max: 100,
    value: lightOnNum,
    change: function (value) {
      lightNum2 = value;
    },
  });
  if (lightOnNum !== 0) {
    lightNum1 = lightOffNum;
    lightNum2 = lightOnNum;
  } else {
    lightNum1 = 0;
    lightNum2 = 20;
  }
  mainIndex = layer.open({
    type: 1,
    title: i18n.language === "zh-cn" ? "设置开关灯值" : "Set switch light value:",
    content: $("#slideDiv2"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">' + (i18n.language === "zh-cn" ? "确定" : "determine") + "</div>", '<div class="layui-icon layui-icon-close">' + (i18n.language === "zh-cn" ? "取消" : "cancellation") + "</div>"],
    yes: function (index, layero) {
      $.post(
        $httpUrl + "/userLightNum/setUserLightNum",
        {
          deviceFid: pid.value,
          lightOnNum: lightNum2,
          lightOffNum: lightNum1,
        },
        function (res) {
          if (res.code === 200) {
            layer.msg(i18n.language === "zh-cn" ? "设置成功！" : "Successfully set");
            layer.close(mainIndex);
            lightOffNum = lightNum1;
            lightOnNum = lightNum2;
          } else {
            layer.msg(i18n.language === "zh-cn" ? "设置失败！" : "Setting failed");
          }
        }
      );
    },
  });
};
let loading = null;
let timer = null;
const updateNet = () => {
  layer.confirm(i18n.language === "zh-cn" ? "确定更新设备拓扑吗？" : "Are you sure to update the device topology?", function (index) {
    layer.close(index); //关闭当前弹窗
    loading = showLoad("正在更新中...");
    $.get($httpUrl + "/operation/getDeviceInfoNode", { deviceId: pid.value }, function (res) {
      let num = res.data;
      if (res.code === 200) {
        let reqNum = 1;
        $.get(
          $httpUrl + "/operation/getNetworkTopology",
          {
            deviceId: pid.value,
            nodeCount: res.data,
          },
          function (res) {
            timer = setInterval(function () {
              $axios
                .post("/operation/getNumber4topologies", {
                  deviceFid: pid.value,
                })
                .then((res) => {
                  if (res.data.data != null) {
                    // console.log(res.data);
                    if (res.data.data.length == num) {
                      layer.msg("设备获取网络拓扑成功！");
                      window.clearInterval(timer);
                    } else {
                      layer.msg("设备获取网络拓扑响应失败！");
                    }
                  }
                })
                .catch((err) => { });
            }, 500);
          }
        );
      } else {
        searchHtml.value = "网关搜灯";
        searchFlag.value = false;
        layer.msg(res.msg);
      }
    });
  });
};
const handleSelectionChange_3 = (val) => {
  multipleSelection_3.value = val;
};
const handleRowClick_3 = (row, column, event) => {
  if (area.value == 100) {
    multipleTableRef_3.value.toggleRowSelection(row);
  }
};
const selected_3 = (row, index) => {
  return true;
};

let numberLog = ref(0);
const getNumber4topologies = () => {
  $axios
    .post("/operationDevice/scan", {
      deviceFid: pid.value,
    })
    .then((res) => {
      if (res.data.data != null) {
        for (let i = 0; i < res.data.data.length; i++) {
          if (checkItem(res.data.data[i])) {
            data.tableData2.push(res.data.data[i]);
          }
        }
      }
    })
    .catch((err) => { });
};

let timeCont = 0;
let at = 0;
let contNumber = ref(0);
let contNumberFlag = ref(false);
let timer9 = null;
let request = null;
const updateNet2 = () => {
  timeCont = 0;
  contNumber.value = 0;
  numberLog.value = 0;
  contNumberFlag.value = false;
  form.render();
  if (request) {
    return false;
  }
  request = $.get($httpUrl + "/operation/getDeviceInfoNode", { deviceId: pid.value }, function (res) {
    if (res.code == 903) {
      layer.msg(res.msg);
      return false;
    }
    request = null;
    if (res.data == null) {
      contNumber.value = null;
    } else {
      contNumber.value = res.data;
    }
    contNumberFlag.value = true;
    if (contNumber.value != null) {
      ElMessage({
        message: "搜到" + contNumber.value + "盏灯",
        type: "success",
        offset: 100,
      });
    }
    if (res.code === 200) {
      timer9 = setInterval(function () {
        $axios
          .post("/operation/getNumber4topologies", {
            deviceFid: pid.value,
          })
          .then((res) => {
            if ((timeCont + 60 * 1000 * 2 < new Date().getTime() && timeCont != 0) || !window.location.href.includes("toSetDeviceManager") || searchFlag.value == false) {
              window.clearInterval(timer9);
              $axios
                .post("/operation/stopGetNumber4topologies", {
                  deviceFid: pid.value,
                })
                .then((res) => {
                  searchHtml.value = "网关搜灯";
                  iconFlag.value = false;
                  searchFlag.value = false;
                })
                .catch((err) => { });
            }
            if (res.data.data != null) {
              numberLog.value = res.data.data * 1;
            }
          })
          .catch((err) => { });
      }, 2000);

      let reqNum = 1;
      timer = setInterval(function () {
        res.data = JSON.parse(res.data);
        at = res.data;
        clearInterval(timer);
        reqNum = 1;
        $axios
          .post("/operation/getplcDevInfo", { deviceFid: pid.value, at: at })
          .then((res) => {
            if (res.data.code) {
              timeCont = new Date().getTime();
              getNumber4topologies();
              timer = setInterval(function () {
                if (dialogVisible2.value == false || !window.location.href.includes("toSetDeviceManager") || searchFlag.value == false) {
                  window.clearInterval(timer);
                }
                getNumber4topologies();
              }, 2000);
            } else {
            }
          })
          .catch((err) => { });
      }, 2000);
    } else {
      searchHtml.value = "网关搜灯";
      searchFlag.value = false;
      iconFlag.value = false;
      layer.msg(res.msg);
    }
  });
};

let dialogVisible2 = ref(false);
let timer2 = null;
const newAdd = () => {
  data.tableData2 = [];
  let params = {
    deviceFid: pid.value,
    mesh: {
      code: 400,
      deviceName: pid.value,
      area: "00 00",
      address: "00 00",
      action: "scan",
      params: "",
      identity: "",
    },
  };

  data.loading2 = true;
  dialogVisible2.value = true;
  updateNet2();
};
const checkItem = (order) => {
  let arr = data.tableData2.filter((item) => {
    return item.id == order.id;
  });
  if (arr.length > 0) {
    return false;
  } else {
    return true;
  }
};
let gateway = ref("");
const operateScan = () => {
  let params = {
    deviceFid: pid.value,
    mesh: {
      code: 400,
      deviceName: pid.value,
      area: "00 00",
      address: "00 00",
      action: "scan",
      params: "",
      identity: "",
    },
  };

  data.loading2 = true;
  window.clearInterval(timer2);
  timer2 = window.setInterval(function () {
    if (dialogVisible2.value == false || !window.location.href.includes("toSetDeviceManager") || searchFlag.value == false) {
      window.clearInterval(timer2);
    }
    $axios
      .post("/operationDevice/scan", {
        deviceFid: pid.value,
      })
      .then((res) => {
        // data.loading2=false;
        if (res.data.data != null) {
          for (let i = 0; i < res.data.data.length; i++) {
            res.data.data[i].groupName = hex2int(res.data.data[i].groupName.slice(1).replace(/\s*/g, ""));
            res.data.data[i].areaCode = hex2int(res.data.data[i].areaCode.replace(/\s*/g, ""));
            if (checkItem(res.data.data[i])) {
              data.tableData2.push(res.data.data[i]);
            }
          }
        }
      });
  }, 1000);
};

let district = ref("");
const outLinght = () => {
  if (searchFlag.value) {
    searchHtml.value = "搜灯中";
    iconFlag.value = true;
  }
};
let num = ref();
let identity = ref();
const mouLight = () => {
  if (searchFlag.value) {
    searchHtml.value = "停止搜灯";
    iconFlag.value = false;
  } else {
    searchHtml.value = "网关搜灯";
  }
};
let group = ref();
const searchLight = () => {
  searchFlag.value = !searchFlag.value;

  if (searchFlag.value == true) {
    ElMessage({
      message: "搜灯中，大约等待30秒！",
      type: "success",
      offset: 100,
    });
    searchHtml.value = "搜灯中";
    iconFlag.value = true;
  }
  if (searchFlag.value) {
    updateNet2();
  }
  return false;
};

const operateStop = () => {
  let params = {
    deviceFid: pid.value,
    mesh: {
      code: 400,
      deviceName: pid.value,
      area: "00 00",
      address: "00 00",
      action: "stopScan",
      params: "",
      identity: "",
    },
  };
  $axios
    .post("/operation/mesh", params)
    .then((res) => {
      data.loading = false;
      window.clearInterval(timer2);
      if (res.data.code === 200) {
      } else {
      }
    })
    .catch((err) => { });
  data.loading2 = false;
  window.clearInterval(timer2);
};

const enterAdd = () => {
  window.clearInterval(timer2);
  let arr = JSON.parse(JSON.stringify(multipleSelection2.value));
  for (let i = 0; i < arr.length; i++) {
    arr[i].action = 1;
  }
  let params = {
    deviceFid: pid.value,
    operationDevices: arr,
  };
  $axios.post("/operationDevice/updateBatch", params).then((res) => {
    if (res.data.code == 200) {
      layer.msg("新增成功！");
      dialogVisible2.value = false;
      getList({ deviceFid: pid.value });
    }
  });
};

const close = () => {
  dialogVisible2.value = false;
  contNumber.value = 0;
  numberLog.value = 0;
  window.clearInterval(timer2);
};

const setCustomName = () => {
  let params = {};
  if (customName.value == "全部") {
    params = { deviceFid: pid.value };
  } else {
    params = { groupName: customName.value };
  }
  getList(params, 1);
};

const allLightOn = () => {
  form.render();
  layer.confirm(i18n.language === "zh-cn" ? "确定设备全部开灯？" : "Are you sure all devices are on?", function (index) {
    loading = showLoad("全设备开灯请求中...");
    $.post(
      $httpUrl + "/operation/multiOperation",
      {
        deviceId: pid.value,
        num: lightOnNum,
        operationalType: 0,
        macAddress: "FFFFFFFFFFFF",
      },
      function (res) {
        if (res.data != "fail") {
          layer.msg("全设备开灯请求成功!");
          let reqNum = 1;
        } else {
          layer.msg("全设备开灯失败!");
        }
      }
    );
  });
};

const allLightOff = () => {
  form.render();
  layer.confirm(i18n.language === "zh-cn" ? "确定设备全部关灯？" : "Are you sure all devices are turned off?", function (index) {
    loading = showLoad("全设备关灯请求中...");
    $.post(
      $httpUrl + "/operation/multiOperation",
      {
        deviceId: pid.value,
        num: lightOffNum,
        operationalType: 2,
        macAddress: "FFFFFFFFFFFF",
      },
      function (res) {
        if (res.data != "fail") {
          layer.msg("全设备关灯请求成功!");
          let reqNum = 1;
        } else {
          layer.msg("全设备关灯失败!");
        }
      }
    );
  });
};

const allLightAdjust = () => {
  form.render();
  var _sensitivity = 0;
  slider.render({
    elem: "#slideTest1", //绑定元素
    input: true, //输入框
    min: 0,
    change: function (value) {
      _sensitivity = value;
    },
  });

  mainIndex = layer.open({
    type: 1,
    title: i18n.language === "zh-cn" ? "调整全设备亮度" : "Adjusting the brightness of the entire device:",
    content: $("#slideDiv"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      loading = showLoad("全设备调整亮度请求中...");
      $.post(
        $httpUrl + "/operation/multiOperation",
        {
          deviceId: pid.value,
          num: _sensitivity,
          operationalType: 1,
          macAddress: "FFFFFFFFFFFF",
        },
        function (res) {
          if (res.data != "fail") {
            layer.msg("全设备调整亮度请求成功！");
            let reqNum = 1;
          } else {
            layer.msg("全设备调整亮度失败!");
          }
        }
      );
    },
    success: function (index) { },
  });
};
const hex2int = (hex) => {
  if (hex == null || hex == "") {
    return;
  }

  var len = hex.length,
    a = new Array(len),
    code;
  for (var i = 0; i < len; i++) {
    code = hex.charCodeAt(i);
    if (48 <= code && code < 58) {
      code -= 48;
    } else {
      code = (code & 0xdf) - 65 + 10;
    }
    a[i] = code;
  }

  return a.reduce(function (acc, c) {
    acc = 16 * acc + c;
    return acc;
  }, 0);
};

const allAdjustColor = () => {
  form.render();
  var _sensitivity = 0;
  slider.render({
    elem: "#slideTest1", //绑定元素
    input: true, //输入框
    min: 0,
    change: function (value) {
      _sensitivity = value;
    },
  });
  mainIndex = layer.open({
    type: 1,
    title: i18n.language === "zh-cn" ? "调整设备色温" : "Adjusting device color temperature",
    content: $("#slideDiv"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      operationalType(5, _sensitivity, true);
    },
  });
};

const allTrigger = () => {
  form.render(); //更新全部
  mainIndex = layer.open({
    type: 1,
    title: "全触发器开关",
    content: $("#lightTestDiv"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      const lTestState = $('input[name="lTest"]:checked').val();
      loading = showLoad("全触发器开关请求中...");
      $.post(
        $httpUrl + "/operation/triggerOperation",
        {
          deviceFid: pid.value,
          type: 2,
          macAddress: "",
          operationState: lTestState,
        },
        function (res) {
          if (res.data == "success") {
            layer.msg("全触发器开关请求成功!");
          } else {
            if (res.code == 903) {
              layer.msg(res.msg);
              return false;
            } else {
              layer.msg("全触发器开关失败!");
            }
          }
        }
      );
    },
    success: function (index) { },
  });
};

const allDarkenDelay = () => {
  form.render();
  lightNum = 0;
  slider.render({
    elem: "#slideTest1", //绑定元素
    input: true, //输入框
    min: 0,
    change: function (value) {
      lightNum = value;
    },
  });
  mainIndex = layer.open({
    type: 1,
    title: i18n.language === "zh-cn" ? "全部关灯延时" : "All lights off delay",
    content: $("#slideDiv"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      loading = showLoad("全部关灯延时请求中...");
      $.post(
        $httpUrl + "/operation/allDarkenDelay",
        {
          deviceFid: pid.value,
          operationalType: 5,
          num: lightNum,
        },
        function (res) {
          if (res.data != "fail") {
            layer.msg("全部关灯延时请求成功！");
          } else {
            layer.msg("全部关灯延时调整失败!");
          }
        }
      );
    },
    success: function (index) { },
  });
};
const allSensitivity = () => {
  form.render();
  _sensitivity = 0;
  slider.render({
    elem: "#slideTest1", //绑定元素
    input: true, //输入框
    min: 0,
    max: 11,
    change: function (value) {
      _sensitivity = value;
    },
  });
  mainIndex = layer.open({
    type: 1,
    title: i18n.language === "zh-cn" ? "调整全触发器灵敏度" : "Adjusting the sensitivity of the full trigger",
    content: $("#slideDiv"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      let sendMsg = "FFFFFFFFFFFF";
      let len = 1;
      let msg = "";
      if (11 < _sensitivity || _sensitivity < 0) {
        return layer.msg("只接受0~11档位");
      }
      msg = _sensitivity.toString(16).toUpperCase().padStart(2, "0") + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg;
      //console.log(msg)
      sensitivity(0, msg);
    },
  });
};
const allPropertie = () => {
  form.render();
  layer.confirm("确定批量获取设备属性？", function (index) {
    loading = showLoad("批量获取设备属性请求中...");

    let maxDelay = 1000;
    let count_down = Math.round((total * maxDelay) / 1000);

    const load = layer.msg(`正在批量获取列表，请等待后台全部获取后重新查看设备列表！预计等待${count_down}秒`, {
      anim: 5,
      time: 0,
      success: function (layero, index) {
        var msg = layero.text();
        var i = count_down;
        var timer = null;
        var fn = function () {
          layero.find(".layui-layer-content").text(`正在批量获取列表，请等待后台全部获取后重新查看设备列表！预计等待${i}秒`);
          if (!i) {
            layer.close(index);
            clearInterval(timer);
          }
          i--;
        };
        timer = setInterval(fn, 1000);
        fn();
      },
    });

    $.get(
      $httpUrl + "/operation/batchGetDevicePropertie",
      {
        deviceFid: pid.value,
        type: 1,
        delayed: Math.round(maxDelay / 3),
        macAddress: "FFFFFFFFFFFF",
      },
      function (res) {
        if (res.code === 200) {
          clearInterval(timer);
          layer.msg("获取设备属性完成");
          getList();
        } else {
          layer.msg("批量获取设备属性失败！");
        }
      }
    );
  });
};
const sensitivity = (operationalType, msg) => {
  let typeList = ["全触发器灵敏度", "设置灵敏度"];
  loading = showLoad(`${typeList[operationalType]}请求中...`);
  $.post(
    $httpUrl + "/operation/sensitivity",
    {
      fid: pid.value,
      msg: msg,
    },
    function (res) {
      if (res.data != "fail") {
        layer.msg(`${typeList[operationalType]}请求发送成功`);
      } else {
        layer.msg(`${typeList[operationalType]}请求发送失败`);
      }
    }
  );
};
const allLightTest = () => {
  form.render();
  mainIndex = layer.open({
    type: 1,
    title: i18n.language === "zh-cn" ? "全灯测试" : "Full light test",
    content: $("#lightTestDiv"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      const lTestState = $('input[name="lTest"]:checked').val();
      loading = showLoad("全灯测试请求中...");
      $.post(
        $httpUrl + "/operation/debugDeviceOperation",
        {
          deviceFid: pid.value,
          type: 2,
          macAddress: "",
          operationState: lTestState,
          macAddress: "FFFFFFFFFFFF",
        },
        function (res) {
          if (res.data != "fail") {
            layer.msg("全灯测试请求成功！");
            let reqNum = 1;
          } else {
            layer.msg("全灯测试失败!");
          }
        }
      );
    },
    success: function (index) { },
  });
};
const closeDialog = () => {
  window.clearInterval(timer);
  window.clearInterval(timer2);
  iconFlag.value = false;
  dialogVisible2.value = false;
  data.loading2 = false;
  searchFlag.value = false;
  searchHtml.value = "网关搜灯";
  contNumber.value = 0;
  numberLog.value = 0;
  $axios
    .post("/operation/stopGetNumber4topologies", {
      deviceFid: pid.value,
    })
    .then((res) => { })
    .catch((err) => { });
};

const showTig = (str) => {
  //01暂关，11永关，00暂开，10永开  FF暂无
  if (str == "01") {
    return "暂关";
  } else if (str == "11") {
    return "永关";
  } else if (str == "00") {
    return "暂开";
  } else if (str == "10") {
    return "永开";
  } else if (str == "FF") {
    return "暂无";
  }
};
const updateCustomName = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg(i18n.language === "zh-cn" ? "还未选择设备！" : "No device has been selected yet!");
    return;
  }
  mainIndex = layer.open({
    type: 1,
    title: "当前设备",
    content: $("#lightNameDiv"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      const customName = $("#customName").val();
      $.post(
        $httpUrl + "/operation/updateOperationDeviceCustomName",
        {
          id: ls.join(","),
          customName: customName,
        },
        function (res) {
          if (res.code === 200) {
            layer.close(mainIndex);
            layer.msg("设置成功！");
            getList({ deviceFid: pid.value });
          } else {
            layer.msg(res.msg);
          }
          $("#customName").val("");
        }
      );
    },
  });
};

const groupNum = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  mainIndex = layer.open({
    type: 1,
    title: "当前设备",
    content: $("#lightNameDiv2"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      const groupNum = $("#groupNum").val();
      let sendMsg = "";
      let len = 0;
      let msg = "";
      for (let i in multipleSelection.value) {
        sendMsg += multipleSelection.value[i].macaddress;
        len += 1;
      }
      if (groupNum) {
        if (!/^[0-9a-fA-F]{1,2}$/.test(groupNum)) {
          return layer.msg("组号不合法,应为2位16进制");
        }
        msg = groupNum.toUpperCase().padStart(2, "0") + "02" + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg;
      }
      let load = layer.msg("正在设置中...", {
        icon: 16,
        shade: [0.5, "#f5f5f5"],
        time: 0,
        scrollbar: false,
        offset: "auto",
      });
      $.post(
        $httpUrl + "/operation/setGroup",
        {
          msg: msg,
          fid: pid.value,
        },
        function (res) {
          if (res.data == "fail" || res.data == null || !res.data) {
            layer.msg("设置失败");
          } else {
            layer.close(mainIndex);
            layer.msg("设置成功！");
            let customNamss = customName.value;
            let p = { deviceFid: pid.value, groupName: customNamss };
            if (customName.value == "全部") {
              customNamss = "";
              p = { deviceFid: pid.value };
            } else {
              customNamss = customName.value;
            }
            getList(p);
          }
          $("#groupNum").val("");
        }
      );
    },
  });
};
let options = ref([]);
let customName = ref("全部");

const getDeviceAliasAllList = () => {
  if (!pid.value) {
    return false;
  }
  $.post(
    $httpUrl + "/operationDevice/deviceGroupAllList",
    {
      deviceFid: pid.value,
    },
    function (res) {
      options.value = res.data.filter((item) => {
        return item.group_name;
      });
      options.value.push({
        group_name: "全部",
      });
    }
  );
};

const setArea = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }

  mainIndex = layer.open({
    type: 1,
    title: "当前设备",
    content: $("#lightNameDiv4"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      const areaCode = $("#areaCode").val();
      let load = layer.msg("正在设置中...", {
        icon: 16,
        shade: [0.5, "#f5f5f5"],
        time: 0,
        scrollbar: false,
        offset: "auto",
      });
      let arr = JSON.parse(JSON.stringify(multipleSelection.value));
      for (let i = 0; i < arr.length; i++) {
        arr[i].areaCode = areaCode;
      }
      let params = {
        deviceFid: pid.value,
        operationDevices: arr,
      };
      $axios.post("/operationDevice/updateBatch", params).then((res) => {
        if (res.data.code === 200) {
          layer.msg("设置成功！");
          layer.close(mainIndex);
          getList({ deviceFid: pid.value });
        } else {
          layer.msg("设置失败!");
          layer.close(mainIndex);
        }
      });
    },
  });
};

const updateCustomName2 = () => {
  $("#customName").val("");
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  mainIndex = layer.open({
    type: 1,
    title: "当前设备",
    content: $("#lightNameDiv"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      const customName1 = $("#customName").val();

      let arr = JSON.parse(JSON.stringify(multipleSelection.value));
      for (let i = 0; i < arr.length; i++) {
        arr[i].customName = customName1;
      }
      let params = {
        deviceFid: pid.value,
        operationDevices: arr,
      };

      layer.msg(`正在设置中....`);
      $axios.post("/operationDevice/updateBatch", params).then((res) => {
        if (res.data.code === 200) {
          layer.msg("设置成功！");
          layer.close(mainIndex);
          let params = {};
          if (customName.value == "全部") {
            params = { deviceFid: pid.value };
          } else {
            params = { deviceFid: pid.value, groupName: customName.value };
          }
          getList(params);
          getDeviceAliasAllList();
        } else {
          layer.msg("设置失败!");
          layer.close(mainIndex);
        }
      });
    },
  });
};

const start = (item) => {
  let params = {
    deviceId: pid.value,
    macAddress: item.macaddress,
    num: 50, //50是测试的默认亮度
    operationalType: 3,
    gropuNum: "00",
  };
  $.post($httpUrl + "/operation/multiOperation", params, function (res) {
    /// layer.close(loading);
    if (res.code === 200 && res.data === "success") {
      layer.msg(`闪一闪请求发送成功`, { time: 500 });
      window.setTimeout(function () {
        stop(params);
      }, 10000);
    } else {
      layer.msg(`闪一闪请求发送失败`, { time: 500 });
    }
  });
};

const stop = (params) => {
  params.operationalType = 4;
  params.num = 50;
  $.post($httpUrl + "/operation/multiOperation", params, function (res) { });
};

const gradually = () => {
  form.render();
  let _sensitivity = 0;
  slider.render({
    elem: "#slide3", //绑定元素
    input: true, //输入框
    min: 0,
    max: 9,
    change: function (value) {
      _sensitivity = value;
      $("#slide3 .layui-input").val("0" + value);
      let str = "0" + value + " 是 " + value * 10 + "ms递变" + value + "%";
      if (value == 0) {
        str = "00关闭缓光";
      }
      $(".slitips").html(str);
    },
  });
  $("#slide3 .layui-input").val("00");

  let _sensitivity2 = 0;
  slider.render({
    elem: "#slide4", //绑定元素
    input: true, //输入框
    min: 0,
    max: 9,
    change: function (value) {
      _sensitivity2 = value;
    },
  });

  mainIndex = layer.open({
    type: 1,
    title: "全渐亮灭",
    content: $("#slideDiv3"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      let sendMsg = "FFFFFFFFFFFF";
      let len = 1;
      let msg = "";
      if (11 < _sensitivity || _sensitivity < 0) {
        return layer.msg("只接受0~11档位");
      }
      msg = _sensitivity.toString(16).toUpperCase().padStart(2, "0") + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg;

      let macs = multipleSelection.value
        .map((item) => {
          return item.macaddress;
        })
        .toString();

      let typeList = ["开灯", "调灯", "关灯", "单灯测试开", "单灯测试关", "调整色温"];
      loading = showLoad(`全渐亮灭请求中...`);

      let macAddress = multipleSelection.value.length == 0 ? "FFFFFFFFFFFF" : macs;
      let objs = {
        deviceFid: pid.value,
        at: "AT+SET_SLOW_LIGHT=" + macAddress + "," + "FF" + "," + ("0" + _sensitivity),
      };
      $axios
        .post("/operation/at", objs)
        .then((res) => {
          data.loading = false;
          if (res.data.code === 200) {
            layer.msg(res.data.data);
          } else {
            showLoad(`全渐亮灭发送失败`, 1000);
          }
        })
        .catch((err) => { });
    },
  });
};
const formdataify = (params) => {
  const formData = new FormData();
  Object.keys(params).forEach((key) => {
    if (typeof params[key] == "string") {
      formData.append(key, params[key]);
    } else {
      formData.append(key, JSON.stringify(params[key]));
    }
  });
  return formData;
};

const ungroup = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  const groupNum = "00";
  let sendMsg = "";
  let len = 0;
  let msg = "";
  for (let i in multipleSelection.value) {
    sendMsg += multipleSelection.value[i].macaddress;
    len += 1;
  }
  if (groupNum) {
    if (!/^[0-9a-fA-F]{1,2}$/.test(groupNum)) {
      return layer.msg("组号不合法,应为2位16进制");
    }
    msg = groupNum.toUpperCase().padStart(2, "0") + "00" + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg;
  }
  let load = layer.msg("正在解除中...", {
    icon: 16,
    shade: [0.5, "#f5f5f5"],
    time: 0,
    scrollbar: false,
    offset: "auto",
  });
  $.post(
    $httpUrl + "/operation/setGroup",
    {
      msg: msg,
      fid: pid.value,
    },
    function (res) {
      if (res.data == "fail" || res.data == null || !res.data) {
        layer.msg("设置失败");
        layer.close(mainIndex);
      } else {
        layer.close(mainIndex);
        layer.msg("设置成功！");
        for (let i in rowsData) {
          if (rowsData[i].checked) {
            rowsData[i].update({
              groupName: groupNum.toUpperCase().padStart(2, "0"),
            });
          }
        }
      }

      $("#groupNum").val("");
    }
  );
};
const lightOn = () => {
  form.render();
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  operationalType(0, lightOnNum);
};
const lightOff = () => {
  form.render();
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  operationalType(2, lightOffNum);
};

const adjustLight = () => {
  form.render();
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  var _sensitivity = 0;
  slider.render({
    elem: "#slideTest1", //绑定元素
    input: true, //输入框
    min: 0,
    change: function (value) {
      _sensitivity = value;
    },
  });
  mainIndex = layer.open({
    type: 1,
    title: "调整设备亮度",
    content: $("#slideDiv"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      operationalType(1, _sensitivity);
    },
  });
};
const adjustColor = () => {
  form.render();
  var _sensitivity = 0;
  slider.render({
    elem: "#slideTest1", //绑定元素
    input: true, //输入框
    min: 0,
    change: function (value) {
      _sensitivity = value;
    },
  });
  mainIndex = layer.open({
    type: 1,
    title: "调整设备色温",
    content: $("#slideDiv"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      operationalType(5, _sensitivity);
    },
  });
};

const setsensitivity = () => {
  form.render();
  var _sensitivity = 0;
  let sendMsg1 = "";
  let len = 0;
  let msg = "";
  for (let i in multipleSelection.value) {
    sendMsg1 += multipleSelection.value[i].macaddress;
    len += 1;
  }
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  slider.render({
    elem: "#slideTest1", //绑定元素
    input: true, //输入框
    min: 0,
    max: 11,
    change: function (value) {
      _sensitivity = value;
    },
  });
  mainIndex = layer.open({
    type: 1,
    title: "调整全触发器灵敏度",
    content: $("#slideDiv"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);

      if (11 < _sensitivity || _sensitivity < 0) {
        return layer.msg("只接受0~11档位");
      }
      msg = _sensitivity.toString(16).toUpperCase().padStart(2, "0") + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg1;
      sensitivity(1, msg);
    },
  });
};
const flash = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  operationalType(3);
};

const stopFlash = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  operationalType(4);
};

const lightTest = () => {
  form.render();
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  form.render();
  mainIndex = layer.open({
    type: 1,
    title: "单灯测试",
    content: $("#lightTestDiv"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      let lTestState = $('input[name="lTest"]:checked').val();
      if (lTestState === "0") {
        operationalType(3);
      } else {
        operationalType(4);
      }
    },
  });
};
const operationalType = async (operationalType, num, allFlag) => {
  let macs = multipleSelection.value
    .map((item) => {
      return item.macaddress;
    })
    .toString();
  let typeList = ["开灯", "调灯", "关灯", "闪一闪", "停止闪", "调整色温"];
  let pamos = {
    deviceId: pid.value,
    macAddress: allFlag ? "FFFFFFFFFFFF" : macs,
    num: num === 0 || num ? num : 50, //50是测试的默认亮度
    operationalType: operationalType,
    gropuNum: "00",
  }
  const res = await upMultiOperation(formdataify(pamos))
  if (res.code === 200 && res.data === "success") {
    ElMessage.success(`${typeList[operationalType]}请求发送成功`);
  } else {
    ElMessage.error(`${typeList[operationalType]}请求发送成功`);
  }
  console.log('upMultiOperation->res->', res);
};
const showType = (type) => {
  if (type == -1) return "系统";
  if (type == 0) return "云平台";
  if (type == 1) return "云产品";
  if (type == 2) return "云设备";
};
let dialogVisible = ref(false);
let textareaV = ref("");
const atOperation = () => {
  dialogVisible.value = true;
};
//OTA升级
let upload = ref();
let otaVisible = ref(false);

const unbind = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  let arr = JSON.parse(JSON.stringify(multipleSelection.value));
  for (let i = 0; i < arr.length; i++) {
    arr[i].action = 0;
  }
  let params = {
    deviceFid: pid.value,
    operationDevices: arr,
  };

  ElMessageBox.confirm("确定要删除吗?", "提示").then(() => {
    $axios.post("/operationDevice/deleteBatch", params).then((res) => {
      if (res.data.code === 200) {
        layer.msg("删除成功！");
        layer.close(mainIndex);
        getList({ deviceFid: pid.value });
      } else {
        layer.msg("删除失败!");
        layer.close(mainIndex);
      }
    });
  });
};

const OTAUpgrade = () => {
  otaVisible.value = true;
};

const enterSen = async () => {
  showChatList.value = [];
  if (textareaV.value == "") {
    return false;
  }
  senloading.value = true;
  let params2 = { deviceFid: pid.value, at: textareaV.value };
  const response = await clackAtApi(params2);
  senloading.value = false;
  const t = globalProperties.$dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
  if (response.code === 200) {
    chatList.value.push({ fcont: textareaV.value, hcont: response.data, time: t });
    ElMessage.success(`系统提示：【${response.message}！】`);
  } else {
    chatList.value.push({ fcont: textareaV.value, hcont: response.message, time: t });
    ElMessage.error(`系统提示：【${response.message}！】`);
  }
  chatList.value.forEach((element) => {
    showChatList.value.push(element);
  });
  showChatList.value.reverse();
  textareaV.value = "";
};

let dialogTableVisible = ref(false);
let gridData = ref([]);
const setAlert = () => {
  dialogTableVisible.value = true;
  getArr();
};

const getArr = () => {
  $.get($httpUrl + "/operationDevice/getBlinkDev?fid=" + pid.value, {}, function (res) {
    gridData.value = res.data;
  });
};

let senloading = ref(false);
const showLoad = (msg) => {
  return layer.msg(msg, {
    icon: 16,
    shade: [0.5, "#f5f5f5"],
    scrollbar: false,
    offset: "auto",
    time: false, //取消自动关闭
  });
};
const multipleTableRef = ref();
const multipleSelection = ref([]);
const multipleSelection2 = ref([]);
const multipleSelection3 = ref([]);

const handleSelectionChange2 = (val) => {
  multipleSelection2.value = val;
};
const handleSelectionChange3 = (val) => {
  multipleSelection3.value = val;
};
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value.clearSelection();
  }
};
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

//全局列表
var tableIns;
//后台设定开灯值
var lightOnNum = 40;
//后台设定关灯值
var lightOffNum = 0;
//全局弹出
var mainIndex;
let total = 0;
var $ = "";
var layer = "";
var form = "";
var table = "";
var dropdown = "";
var sdTable = "";
var slider = "";
var slider1 = "";
var slider2 = "";
let _sensitivity = 0;
var secIndex = "";
var lightNum = 0;

const getWidth = () => {
  return window.innerWidth - 398 + "px";
};
const getHeight = () => {
  return window.innerHeight - 278 + "px";
};
let multipleSelection_3 = ref([]);
const setArea3 = () => {
  let ls = multipleSelection_3.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  mainIndex = layer.open({
    type: 1,
    title: "当前设备",
    content: $("#lightNameDiv4_3"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      const areaCode = $("#areaCode_3").val();
      let load = layer.msg("正在设置中...", {
        icon: 16,
        shade: [0.5, "#f5f5f5"],
        time: 0,
        scrollbar: false,
        offset: "auto",
      });
      let arr = JSON.parse(JSON.stringify(multipleSelection_3.value));
      for (let i = 0; i < arr.length; i++) {
        arr[i].areaCode = areaCode;
      }
      let params = {
        deviceFid: pid.value,
        operationDevices: arr,
      };
      $axios.post("/operationDevice/updateBatch", params).then((res) => {
        getArr();
        if (res.data.code === 200) {
          layer.msg("设置成功！");
          layer.close(mainIndex);
        } else {
          layer.msg("设置失败!");
          layer.close(mainIndex);
        }
      });
    },
  });
};
const groupNum3 = () => {
  let ls = multipleSelection_3.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  mainIndex = layer.open({
    type: 1,
    title: "当前设备",
    content: $("#lightNameDiv2_3"),
    area: ["40%", "35%"],
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      const groupNum = $("#groupNum_3").val();
      let sendMsg = "";
      let len = 0;
      let msg = "";
      for (let i in multipleSelection_3.value) {
        sendMsg += multipleSelection_3.value[i].macaddress;
        len += 1;
      }
      if (groupNum) {
        if (!/^[0-9a-fA-F]{1,2}$/.test(groupNum)) {
          return layer.msg("组号不合法,应为2位16进制");
        }
        msg = groupNum.toUpperCase().padStart(2, "0") + "02" + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg;
      }
      let load = layer.msg("正在设置中...", {
        icon: 16,
        shade: [0.5, "#f5f5f5"],
        time: 0,
        scrollbar: false,
        offset: "auto",
      });
      $.post(
        $httpUrl + "/operation/setGroup",
        {
          msg: msg,
          fid: pid.value,
        },
        function (res) {
          getArr();
          if (res.data == "fail" || res.data == null || !res.data) {
            layer.msg("设置失败");
          } else {
            layer.close(mainIndex);
            layer.msg("设置成功！");
          }

          $("#groupNum_3").val("");
        }
      );
    },
  });
};
const ungroup3 = () => {
  let ls = multipleSelection_3.value.map((item) => {
    return item.id;
  });
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  const groupNum = "00";
  let sendMsg = "";
  let len = 0;
  let msg = "";
  for (let i in multipleSelection_3.value) {
    // ls.push(rowsData[i].data.id)
    sendMsg += multipleSelection_3.value[i].macaddress;
    len += 1;
  }
  if (groupNum) {
    if (!/^[0-9a-fA-F]{1,2}$/.test(groupNum)) {
      return layer.msg("组号不合法,应为2位16进制");
    }
    msg = groupNum.toUpperCase().padStart(2, "0") + "00" + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg;
  }
  let load = layer.msg("正在解除中...", {
    icon: 16,
    shade: [0.5, "#f5f5f5"],
    time: 0,
    scrollbar: false,
    offset: "auto",
  });
  $.post(
    $httpUrl + "/operation/setGroup",
    {
      msg: msg,
      fid: pid.value,
    },
    function (res) {
      if (res.data == "fail" || res.data == null || !res.data) {
        layer.msg("设置失败");
        layer.close(mainIndex);
      } else {
        layer.close(mainIndex);
        layer.msg("设置成功！");
      }
      $("#groupNum_3").val("");
    }
  );
};

onMounted(() => {
  layui.extend({}).use(["jquery", "layer", "form", "table", "slider", "dropdown"], function () {
    $ = layui.jquery;
    layer = layui.layer;
    form = layui.form;
    table = layui.table;
    dropdown = layui.dropdown;
    sdTable = layui.table;
    slider = layui.slider;
    slider1 = layui.slider;
    slider2 = layui.slider;
    _sensitivity = 0;
    //第二弹出
    secIndex = "";
    //渲染滑块
    lightNum = 0;
    slider.render({
      elem: "#slideTest1", //绑定元素
      input: true, //输入框
      min: 0,
      change: function (value) {
        lightNum = value;
      },
    });
    getList({});
    getDeviceAliasAllList();
  });
});
</script>

<style lang="scss" scoped>
.tsdm-box-cls {
  width: auto;
  padding: 0px;
  margin-top: -8px;
  margin-right: -17px;
  position: relative;
  left: 54px;
}

.dialog-footer {
  text-align: center;
  display: block;
}

.btnbox {
  // line-height: 285%;
  width: 100%;

  .top {
    color: #fff;
  }

  button {
    min-width: 8rem;
  }
}

.atbox {
  padding: 10px 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 550px;
  overflow: scroll;
  display: flex;
  flex-direction: column-reverse;
  padding-bottom: 48px;
}

:deep(.selectName .el-input__wrapper) {
  background: none !important;
  box-shadow: none !important;
}

:deep(.selectName ::-webkit-input-placeholder) {
  color: #fff !important;
  text-align: right;
}

:deep(.selectName .el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: none !important;
}

:deep(.selectName input) {
  color: #fff !important;
  text-align: right;
}

:deep(.selectName select) {
  min-width: 80px;
  margin-left: 6px;
}

:deep(.selectName ::-webkit-input-placeholder) {
  color: #fff !important;
}

.text-red {
  color: red;
}

.uploadBox {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;

  .upload-demo {
    text-align: center;
  }
}

:deep(.uploadBox .el-progress) {
  display: none !important;
}

.atbox .el-row {
  margin-bottom: 25px;
}

.rowbot {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding-bottom: 0px !important;
  border-bottom: 0px !important;
}

.slidebox {
  position: relative;
  top: 10px;
}

.slitips {
  text-align: center;
  line-height: 42px;
}

:deep(.newAdd .el-table__inner-wrapper) {
  border: solid 1px #fff;
}

:deep(.sceneTableData .el-scrollbar__thumb) {
  background: #ccc !important;
}

:deep(.sceneTableData .el-button + .el-button) {
  margin-left: 5px;
}

.newAddTab {
  border-bottom: solid 1px #fff;
  height: 50vh;
}

:deep(.newAddTab .el-table__empty-text) {
  line-height: 43vh;
}

:deep(.el-dialog.is-draggable .el-dialog__header) {
  background: #217093;
}

:deep(.dialogPermiss .el-dialog__title) {
  color: #fff !important;
}

:deep(.dialogPermiss .el-dialog__headerbtn .el-dialog__close) {
  color: #fff !important;
}

.setArea3 {
  padding: 9px 0;
  margin-top: -17px;
}

.btn3 {
  display: block;

  .el-button+.el-button {
    margin-left: 0px;
    margin-top: 5px;
  }
}
</style>

<style lang="scss" scoped>
.Naming {
  display: flex;
  align-items: center;
  height: 100%;
}

.available1 {
  color: orangered;
}

:deep(.selectName .el-input__wrapper) {
  background: none !important;
  box-shadow: none !important;
}

:deep(.selectName .el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: none !important;
}

:deep(.selectName select) {
  min-width: 80px;
  margin-left: 6px;
}

:deep(.selectName ::-webkit-input-placeholder) {
  color: #fff !important;
}

.dialog-footer {
  text-align: center;
  width: 100%;
  display: block;
}

:deep(.newAdd .el-table__inner-wrapper) {
  border: solid 1px #fff;
}

:deep(.sceneTableData .el-scrollbar__thumb) {
  background: #ccc !important;
}

:deep(.sceneTableData .el-button + .el-button) {
  margin-left: 5px;
}
</style>

<style lang="scss" scoped>
.newAdd .el-dialog__header {
  background: #0ec8ec69 !important;
}

.newAdd .el-dialog__header .el-dialog__title {
  color: #fff !important;
}

.el-row {
  padding: 10px 0;
  border-bottom: dotted 1px #ddd;
}

.el-row>div {
  align-items: center;
}

.el-row>div.el-col-4:first-child {
  display: flex;
}

.sliderbox {
  display: flex;
  align-items: center;
}

.sliderbox>span {
  margin-left: 20px;
  font-size: 14px;
  display: block;
  width: 30px;
}

.linev .layui-form-label {
  width: 114px;
}

.linev .layui-input-block {
  position: relative;
  top: 17px;
  margin-left: 150px;
}

:deep(.selectName input) {
  color: #fff !important;
  text-align: right;
}

:deep(.wiretab .el-checkbox__input.is-disabled .el-checkbox__inner) {
  background: #ccc;
  border-color: #ccc;
}

.searchFlag {
  background: #30ce13;
  border-color: #30ce13;
  cursor: pointer;
  vertical-align: 0px;
}

.searchFlag:hover {
  background: #ee2020;
  border-color: #ee2020;
  cursor: pointer;
}

.searchFlagBox {
  display: inline-block;
  cursor: pointer !important;
}

.loa {
  animation: rotating 2s linear infinite;
}

@-webkit-keyframes rotating {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(1turn);
  }
}

@keyframes rotating {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(1turn);
  }
}
</style>
<style>
.newAdd .el-dialog__title {
  color: #fff !important;
}

.el-dialog__body .top .el-row>div {
  display: flex;
}

.top .el-row>div>span {
  display: inline-block;
  width: 100px;
  text-align: right;
  padding-right: 10px;
}

.el-dialog__body .top .el-row>div>span {
  width: auto;
  white-space: nowrap;
  padding: 0 5px;
}

.radiocont .layui-form-radio {
  display: none;
}



.tops .el-row>div>span>div {
  margin-left: 5px;
}

.newName {
  display: flex;
  align-items: center;
}

.newName>span {
  display: flex;
  width: 85px;
  text-align: right;
  font-size: 14px;
  padding-right: 10px;
  align-items: center;
  justify-content: right;
}

.newName p {
  padding-left: 30px;
}
</style>
<style>
.layui-layer-wrap .el-radio.el-radio--large .el-radio__label {
  color: #f13131 !important;
}

.top .el-select .el-input__wrapper {
  background: none;
}

.top .el-input__wrapper {
  background: none;
}

::-webkit-input-placeholder {
  color: #ccc !important;
  font-size: 16px;
}

.tops .el-input__inner {
  color: #fff !important;
}

.tops .el-row {
  padding-right: 0% !important;
}

.tops .el-row>div>span {
  width: auto !important;
  margin-top: 10px;
}

.tops .el-row>div {
  display: block;
}

.sceneTableData .cell {
  color: #fff;
}

.sceneTableData td .cell {
  color: #000;
}

.sceneTableData th {
  background: var(--el-color-primary) !important;
}

.sceneVisible {
  width: 100%;
}

.sceneVisible .el-col {
  margin-bottom: 10px;
}

.altcon {
  width: 120px;
  height: 36px;
  background-color: #ecf0f8;
  border-radius: 6px;
  text-align: center;
  line-height: 36px;
  margin-left: 10px;
  font-size: 14px;
  color: #1e62da;
  width: fit-content;
  padding: 0px 6px;
  margin-bottom: 10px;
  display: inline-block;
  cursor: pointer;
}

.operateInfo {
  font-weight: bold;
}

.altconp {
  padding-left: 30px;
}

.top .el-button+.el-button {
  margin-left: 6px;
}

.Actions .el-dialog__header {
  background: none !important;
}

.tipsBox {
  margin-top: 4px;
}

.numberLog {
  color: #d99600;
  display: inline-block;
  padding: 4px;
  border: solid 1px #d99600;
  border-radius: 3px;
  margin-left: 3px;
  position: relative;
  top: 3px;
}
</style>
